<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .blue {
            color: blue;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="myapp">
        <!-- 将class与对象绑定 会根据里面的值而改变 -->
        <div :class="{blue:is_blue,red:is_red}">示例文案一</div>
        <div :class="which_color">示例文案二</div>
        <div :class="style">示例文案三</div>
        <!-- 同样可以直接通过上面的三种方法直接添加绑定CSS样式 -->
        <div :style="{color:text_color,fontSize:text_font}">示例文案四</div>

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                // 方法一
                is_red: true,
                is_blue: true,
                //方法二
                which_color: {
                    blue: true,
                    red: false,
                },
                text_color:"yellow",
                text_font:'200px',
            }
        },
        computed: {
            //方法三更加灵活
            style() {
                //if...
                return { blue: false, red: true };
            }
        }

    }
    let instance = Vue.createApp(app).mount("#myapp");
</script>

</html>